<template>
	<view class="flex-col page">
		<view class="flex-col group_3">
			<view class="flex-col section_2">
				<view class="flex-col group_4">
					<view class="justify-between group_5" @click="updateImg">
						<text class="text_3">头像</text>
						<image v-if="userInfos.address" :src="userInfos.address" class="image_4" />
						<image v-else :src="imgUrl+'16557871010938862621.png·'" class="image_4" />
					</view>

					<view class="justify-between group_6">
						<text class="text_4">ID</text>
						<text class="text_5">{{userInfos.id}}</text>
					</view>
					<view class="justify-between group_7">
						<text class="text_6">昵称</text>
						<input class="text_7" type="text" maxlength="7" v-model="userInfos.name"
							placeholder="昵称最多为五位字符">
					</view>
				</view>
				<view class="justify-between group_8" @click="sexShow=true">
					<text class="text_8">性别</text>
					<text class="text_9">
						<picker :value="index" :range="columns" @change="change">
							<view class="uni-input">{{columns[index]}}</view>
						</picker>
					</text>
				</view>
				<view class="flex-col group_9">
					<view class="justify-between group_10" @click="show=true">
						<text class="text_10">生日</text>
						<text class="text_11">
							<!-- <picker :value="date" class="borderRadio" mode="date" @change="dateChange"
								:start="startDate" :end="endDate">
								<view class="uni-input">{{date}}</view>
							</picker> -->
							<u-datetime-picker :show="show" title="选择生日" :maxDate="time" :formatter="formatter"
								:minDate="minDate" @cancel="show = false" mode="date" @confirm="getTimer">
							</u-datetime-picker>
							<view class="uni-input">{{$u.timeFormat(date, 'yyyy-mm-dd') || Date.now()}}</view>
						</text>
					</view>
					<view class="justify-between group_11">
						<text class="text_12">联系方式</text>
						<text class="text_13">{{userInfos.phone}}</text>
					</view>
				</view>
			</view>
			<view class="c-t-f"> PC端网址：{{$PC_URL}}</view>
			<view class="flex-col justify-center items-center button" @click="submits"><text class="text_14">保存</text>
			</view>
		</view>

		<!-- <u-picker :show="sexShow" :columns="columns"></u-picker> -->

		<!-- <uni-popup height="200" ref="popup" type="bottom">
			<view class="popupText borderRadio">
				<view class="pad20">
					修改头像
				</view>
				<view class="pad20" @click="cameraImg">
					拍照
				</view>
				<view class="pad20" @click="fileChooseImg">
					从手机相册选择
				</view>
				<view class="line-canel"></view>

				<view class="cancel-btn" @click="hiddenPopup">
					取消
				</view>
			</view>
		</uni-popup> -->
		<u-popup :show="imgShow" closeOnClickOverlay>
			<view class="popupText borderRadio">
				<view class="pad20">
					修改头像
				</view>
				<view class="pad20" @click="cameraImg">
					拍照
				</view>
				<view class="pad20" @click="fileChooseImg">
					从手机相册选择
				</view>
				<view class="line-canel"></view>

				<view class="cancel-btn" @click="close">
					取消
				</view>
			</view>
		</u-popup>


	</view>


	</view>
	</view>


</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				time: Date.now(),
				imgUrl: this.$IMG_URL,
				show: false,
				sexShow: false,
				date: '2022-02-22',
				index: 0,
				columns: ['男', "女"],
				userInfos: {},
				fileList: [],
				tempFilePaths: "",
				imgShow: false
			};
		},
		onShow() {
			this.userInfo()
		},
		computed: {
			minDate() {
				let timeStr = "1910-01-01 00:00:00";
				let time = new Date(timeStr);
				time.getTime();
				return time.getTime();
			}
			// startDate() {
			// 	return this.getDate('start');
			// },
			// endDate() {
			// 	return this.getDate('end');
			// }

		},

		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
			 	return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			getTimer(time) {
				this.date = time.value
				this.show = false
			},
			close() {
				this.imgShow = false
			},
			// getDate(type) {
			// 	// 生日做限制
			// 	const date = new Date();
			// 	let year = date.getFullYear();
			// 	let month = date.getMonth() + 1;
			// 	let day = date.getDate();

			// 	if (type === 'start') {
			// 		year = year - 60;
			// 	} else if (type === 'end') {
			// 		year = year;
			// 	}
			// 	month = month > 9 ? month : '0' + month;
			// 	day = day > 9 ? day : '0' + day;
			// 	return `${year}-${month}-${day}`;
			// },
			...mapActions(['getUserInfo']),
			success(file) {
				this.fileList.push(file);
			},
			delectPic(index) {
				this.fileList.splice(index, 1);
			},
			change(e) {
				this.index = e.detail.value;
				console.log(this.index)
			},
			// dateChange(e) {
			// 	this.date = e.detail.value;
			// },
			userInfo() {
				this.$http('harryroom.queryConsumerInfo').then(r => {
					if (r.code = 200) {
						this.userInfos = r.data
						if (r.data.sex === '2') {
							this.index = 0
						} else {
							this.index = r.data.sex
						}

						if (r.data.birth) {
							this.date = r.data.birth
						}

					} else {
						this.$u.toast(r.msg);
					}
				});
			},


			// 修改头像
			// coverEdit() {
			// 	uni.chooseImage({
			// 		sourceType: ['camera', 'album'], //拍照与相册选择
			// 		success: chooseImageRes => {
			// 			console.log('成功', chooseImageRes);
			// 			const tempFilePaths = chooseImageRes.tempFilePaths;
			// 			uni.uploadFile({
			// 				url: this.$API_URL + 'app3/upload/uploadOne', // 仅为示例，非真实的接口地址
			// 				filePath: tempFilePaths[0],
			// 				name: 'file',
			// 				success: res => {
			// 					res = JSON.parse(res.data)
			// 					console.log(res)
			// 					if (res.code == 200) {
			// 						this.userInfos.address = res.data
			// 						this.hiddenPopup()
			// 					} else {
			// 						this.$u.toast('error');
			// 					}
			// 				}
			// 			});
			// 		},
			// 		fail: err => {
			// 			this.myToast('图片上传失败', 'none');
			// 		}
			// 	});
			// },

			updateImg() {
				// 点击显示弹层
				// this.$refs.popup.open('bottom')
				this.imgShow = true
				// uni.chooseImage({
				// 	sourceType: ['album'], //从相册选择
				// 	success: chooseImageRes => {
				// 		console.log('成功', chooseImageRes);
				// 		const tempFilePaths = chooseImageRes.tempFilePaths;
				// 		uni.uploadFile({
				// 			url: this.$API_URL + 'app3/upload/uploadOne', // 仅为示例，非真实的接口地址
				// 			filePath: tempFilePaths[0],
				// 			name: 'file',
				// 			success: res => {
				// 				res = JSON.parse(res.data)
				// 				console.log(res)
				// 				if (res.code == 200) {
				// 					this.userInfos.address = res.data
				// 				} else {
				// 					this.$u.toast('error');
				// 				}
				// 			}
				// 		});
				// 	},
				// 	fail: err => {
				// 		this.myToast('图片上传失败', 'none');
				// 	}
				// });
			},
			// 点击从手机相册选择
			fileChooseImg() {
				uni.chooseImage({
					sourceType: ['album'], //相册选择
					crop: {
						width: 375,
						height: 375,
						resize: false
					},
					// 在手机端可以正常运行
					success: chooseImageRes => {
						console.log('成功', chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.$API_URL + 'app3/upload/uploadOne', // 仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: res => {
								res = JSON.parse(res.data)
								console.log(res)
								if (res.code == 200) {
									let that = this
									uni.showToast({
										icon: 'loading',
										mask: true,
										success(result) {
											// 判断是否成功
											if (result.errMsg === 'showToast:ok') {
												that.userInfos.address = res.data
												that.close()
											} else {
												uni.showToast({
													icon: "error",
													title: "操作无效,请重试",
													success() {
														that.close()
													}
												})
											}
										}
									})

								} else {
									this.$u.toast('error');
								}
							}
						});
					},
					fail: err => {
						this.myToast('图片上传失败', 'none');
					}
				});

			},

			// 点击调起相机
			cameraImg() {
				uni.chooseImage({
					sourceType: ['camera'], //拍照选择
					success: chooseImageRes => {
						console.log('成功', chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.$API_URL + 'app3/upload/uploadOne', // 仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: res => {
								res = JSON.parse(res.data)
								console.log(res)
								if (res.code == 200) {
									this.userInfos.address = res.data
									// 上传成功关闭弹窗
									this.close()
								} else {
									this.$u.toast('error');
								}
							}
						});
					},
					fail: err => {
						this.myToast('图片上传失败', 'none');
					}
				});
			},
			// 点击关闭pup弹窗
			hiddenPopup() {
				this.$refs.popup.close()
			},
			submits() {

				if (this.date == '' || this.date == '请选择') {
					this.$u.toast('请您填写生日');
					return;
				}
				var info = {
					address: this.userInfos.address,
					birth: this.date,
					name: this.userInfos.name,
					sex: this.index
				}
				this.$http('harryroom.updateConsumerInfo', info).then(r => {
					console.log(r)
					if (r.code = 200) {
						this.getUserInfo(uni.getStorageSync('token'));
						this.$u.toast(r.msg);
						this.go('/pages/index/my', true);
					} else {
						this.$u.toast(r.msg);
					}
				});
			}
		},
	};
</script>

<style scoped lang="scss">
	/* .container {
		height: 100vh;
	} */
	/deep/ .uni-picker-container .uni-picker-custom {
		background-color: red;
	}

	/deep/ .u-picker {
		height: 500rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;

	}

	/deep/ .u-popup__content {
		background-color: #7f7f7f;
	}

	/deep/ .u-picker__view {

		height: 600rpx !important;
		padding: 0 60rpx;
	}

	.popupText {
		text-align: center;
		font-size: 30rpx;
	}

	.borderRadio {
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.pad20 {
		padding: 30rpx 0;
		border-bottom: 2rpx solid #eee;
	}

	.cancel-btn {
		color: #648CD8;
		padding: 40rpx 0;
	}

	.line-canel {
		height: 20rpx;
		background-color: #f6f7f9;
	}

	page {
		background-color: #f6f7f9;
	}

	.page {
		background-color: #f6f7f9;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_3 {
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.section_2 {
		padding-left: 32rpx;
		padding-right: 30rpx;
		background-color: #ffffff;
	}

	.c-t-f {
		color: red;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 386rpx;
		font-size: 24rpx;
	}

	.button {

		// padding: 29rpx 41rpx;
		height: 88rpx;
		background-color: #4B5FFD;
		color: #ffffff;
		border-radius: 64rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.group_4 {
		padding-top: 19rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_8 {
		// padding-top: 30rpx;
		display: flex;
		align-items: center;
		height: 110rpx;
	}

	.group_9 {
		// margin-top: 41rpx;
		// height: 110rpx;
		display: flex;
		border-top: solid 1rpx #eeeeee;
	}

	.text_14 {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}

	.group_5 {
		padding: 8rpx 0 13rpx;
	}

	.group_6 {
		margin-top: 18rpx;
		// padding: 37rpx 0 34rpx;
		display: flex;
		align-items: center;
		height: 110rpx;
		border-top: solid 1rpx #eeeeee;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_7 {
		display: flex;
		flex-direction: row;
		// padding: 29rpx 0 42rpx;
		height: 110rpx;
		align-items: center;
		justify-content: space-between;
	}

	.text_8 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_9 {
		color: #666666;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.group_10 {
		// padding: 29rpx 0 35rpx;
		display: flex;
		align-items: center;
		height: 110rpx;
		border-bottom: solid 1rpx #eeeeee;
	}

	.group_11 {
		// padding: 29rpx 0 35rpx;
		display: flex;
		align-items: center;
		height: 110rpx;
	}

	.text_3 {
		margin-top: 19rpx;
		color: #333333;
		font-weight: 400;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_4 {
		filter: drop-shadow(0px 3rpx 2rpx #0000001a);
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}

	.text_4 {
		font-weight: 400;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_5 {
		color: #666666;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_6 {
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_7 {
		display: flex;
		text-align: right;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		color: #666666;
		/* margin-right: -60rpx; */
	}

	.text_10 {
		margin-bottom: 7rpx;
		font-weight: 400;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_11 {
		margin-top: 7rpx;
		color: #666666;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_12 {
		font-weight: 400;
		margin-bottom: 7rpx;
		color: #333333;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_13 {

		margin-top: 7rpx;
		color: #666666;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
	}
</style>
